<template>
    <div class="reply-page-wrapper">
        <div class="reply-page">
            <div class="reply-header">
                <span @click="$emit('close')">X</span>
                <span>5条评论</span>
            </div>

            <div class="reply-origin">
                <img :src="originReview.head_img" />
                            
                <span class="name">
                    {{ originReview.name }} <span>楼主</span>
                </span>
                
                <span class="like">
                    赞{{ originReview.like }}
                </span>

                <p class="content">
                    {{ originReview.content }}
                </p>
            </div>

            <div class="reply-all">
                <h1>全部回复</h1>

                <ReviewCard 
                    v-for="review of reviews" 
                    :key="review.id" 
                    :review="review"
                    class="review-card">
                </ReviewCard>
            </div>

            <div class="reply-footer">
                <div class="write-review">
                    <input type="text" placeholder="写评论...">
                </div>

                <div class="right">
                    <div>43评论</div>
                    <div>收藏</div>
                    <div>点赞</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ReviewCard from "@/components/ReviewCard";

export default {
    name: 'replyPage',
    data () {
        return {
            reviews: [
                {
                    id: 1,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '你把我灌醉2333333',
                    like: 5,
                    content: '炒冷饭可以，得做点新游戏出来，这个时代产品太少',
                    replyCount: 5,
                    date: '9-25'
                },
                {
                    id: 2,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '活的就是心态',
                    like: 6,
                    content: '唯独ps5玩这个游戏头晕想吐',
                    replyCount: 2,
                    date: '9-26'
                },
                {
                    id: 3,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '飘香小鸭子',
                    like: 2,
                    content: '这款游戏 以后会登上PS4 吗？',
                    replyCount: 5,
                    date: '9-26'
                },
                {
                    id: 4,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '飘213213',
                    like: 5,
                    replyContent: '@飘香小鸭子: 这款游戏 以后会登上PS4 吗？',
                    content: '不会',
                    replyCount: 5,
                    date: '9-26'
                },
                {
                    id: 5,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '飘香小鸭子',
                    like: 2,
                    content: '这款游戏 以后会登上PS4 吗？',
                    replyCount: 5,
                    date: '9-26'
                },
                {
                    id: 6,
                    head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                    name: '飘香小鸭子',
                    like: 2,
                    content: '这款游戏 以后会登上PS4 吗？',
                    replyCount: 5,
                    date: '9-26'
                }
            ],
            originReview: {
                id: 1,
                head_img: 'https://sf3-cdn-tos.toutiaostatic.com/img/user-avatar/c20416a71ee856eba343a68a74d35d21~300x300.image',
                name: '你把我灌醉2333333',
                like: 5,
                content: '炒冷饭可以，得做点新游戏出来，这个时代产品太少',
                replyCount: 5,
                date: '9-25'
            }
        }
    },
    components: {
        ReviewCard
    }
}
</script>

<style lang="less" scoped>
.reply-page-wrapper{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;

    .reply-page{
        padding: 40px 0 45px;
        overflow: auto;
        height: 100%;
        .reply-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background-color: #fff;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            border-bottom: 1px solid @background-grey-f6;
            span:nth-of-type(2){
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                font-size: 16px;
                font-weight: bold;
            }
        }

        .reply-origin{
            background-color: #fff;
            padding: 12px 20px;
            border-bottom: 1px solid @background-grey-f6;

            display: grid;
            grid-template-columns: 40px 1fr 25px;
            align-items: center;
            row-gap: 6px;

            img{
                margin-top: 6px;
                height: 30px;
                width: 30px;
                border-radius: 50%;
            }

            .name{
                font-size: 13px;
                font-weight: bold;
                span{
                    background-color: #edebfa;
                    color: #709ace;
                    font-size: 12px;
                    padding: 0 3px;
                    border-radius: 3px;
                    display: inline-block;
                    transform: scale(.8);
                }
            }

            .like{
                font-size: 13px;
                font-weight: bold;
            }

            .content{
                grid-column-start: 2;
                grid-column-end: 3;
                font-size: 14px;
                font-weight: bold;
            }
        }

        .reply-all{
            background-color: #fff;
            padding: 0 20px 10px;
            
            h1{
                padding: 10px 0;
                font-size: 14px;
                font-weight: bold;
            }

            .review-card:not(:nth-of-type(1)){
                margin-top: 15px;
            }
        }

        .reply-footer{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            padding: 8px 0 8px 15px;
            height: 30px;
            box-sizing: content-box;
            background-color: #fff;
            .write-review{
                input{
                    width: 180px;
                    height: 30px;
                    padding-left: 20px;
                    padding-top: 3px;
                    background-color: @background-grey-f2;
                    border-radius: 20px;
                    outline: none;
                    border: none;
                }
            }

            .right{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-around;

                font-size: 14px;
                color: @font-grey-99;
            }
        }
    }
}
</style>